import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
import org.qtproject.qtquick 1.0
import "qrc:/js/resources/Constants.js" as Constant

import "../delegate"
import "../common"
import "../page"
import "../configure"

MainFooterPage {
    width: Constant.width  * m_ratio
    height: Constant.height * m_ratio

    property int m_margin : 10 * m_ratio
    property real m_ratio : ApplicationInfo.ratio
    property string separator: "        ";
    property var uid: ApplicationInfo.activeUid;
    property int m_heightItem : 120 * m_ratio;

    m_footer.title: "Turn back ...";
    m_footer.showBack: true
    m_footer.onBackClicked: {
        console.log("m_footer.onSearched click Turn back ");
        id_pageView.pop();
    }

    Item {
        width: parent.width
        height: parent.height - m_footer.height

        anchors.bottom: m_footer.top;

        anchors.topMargin: 5;

        TextField {
            id: id_txtSearch
            style: id_touchStyle
            placeholderText: separator + separator + "Enter name or phone number..."
            width: parent.width - m_margin
            height: 60 * m_ratio

            opacity: 0.5

            anchors.horizontalCenter: parent.horizontalCenter

            onTextChanged: {
                id_txtSearch.opacity = 1;
                id_imgCancle.visible = true;
                id_imgSearch.visible = id_txtSearch.text.length === 0 ? true : false;
                ApplicationInfo.onDoSearchFriends(id_txtSearch.text);
            }

            Image {
                id: id_imgSearch
                width: 25 * m_ratio
                height: 25 * m_ratio
                source: "qrc:/images/resources/icon_search_xam.png"

                x: 10 * m_ratio

                anchors.verticalCenter: parent.verticalCenter
            }

            Image {
                id: id_imgCancle
                width: 25 * m_ratio
                height: 25 * m_ratio
                source: "qrc:/images/resources/icon_del.png"

                visible: false

                x: separator.length

                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter

                MouseArea {
                    id: areaCancel
                    anchors.fill: id_imgCancle
                    onClicked: {
                        id_txtSearch.text = "";
                        id_imgCancle.visible = false;
                    }
                }
            }
        }

        ListView {
            id: id_friendList
            width: parent.width
            height: parent.height - id_txtSearch.height
            visible: true
            spacing: 8

            anchors.top: id_txtSearch.bottom
            //y: id_txtSearch.y + id_txtSearch.height

            delegate: SearchFriendDelegate {
                m_uid: uid
            }

            model: ApplicationInfo.friendSearchModel

            ScrollBar {
                scrollArea: id_friendList;
                height: id_friendList.height;
                width: 8 * m_ratio
                anchors.right: id_friendList.right
            }
        }

    }

    Component {
        id: id_touchStyle
        TextFieldStyle {
            //textColor: "white"
            //font.pixelSize: 28 *m_ratio
            background: Item {
                implicitHeight: 50
                implicitWidth: 320
                BorderImage {
                    source: "qrc:/staticdata/images/textinput.png"
                    border.left: 8
                    border.right: 8
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }


    Component {
        id: touchStyle
        ButtonStyle {
            panel: Item {
                implicitHeight: 50
                implicitWidth: 320
                BorderImage {
                    anchors.fill: parent
                    antialiasing: true
                    border.bottom: 8
                    border.top: 8
                    border.left: 8
                    border.right: 8
                    anchors.margins: control.pressed ? -4 : 0
                    source: control.pressed ? "qrc:/staticdata/images/button_pressed.png" : "qrc:/staticdata/images/button_default.png"
                    Text {
                        text: control.text
                        anchors.centerIn: parent
                        color: "white"
                        font.pixelSize: 23
                        renderType: Text.NativeRendering
                    }
                }
            }
        }
    }
}
